<template>
  <div class="m-app-container m-products-area">
    <!-- 筛选条件 -->
    <div class="p-opitons">
      <div class="options-item">
        <span class="options-title">产品金额</span>
        <div class="u">
          <ul>
            <li class="all" @click="_selectedItem">全部</li>
            <li>10-50万</li>
            <li>50-100万</li>
            <li>100-500万</li>
            <li>500万以上</li>
          </ul>
        </div>
      </div>
      <div class="options-item">
        <span class="options-title">产品期限</span>
        <div class="u">
          <ul>
            <li class="all">全部</li>
            <li>30天以内</li>
            <li>2-3个月</li>
            <li>4-5个月</li>
            <li>6个月以上</li>
          </ul>
        </div>
      </div>
      <div class="options-item">
        <span class="options-title">产品状态</span>
        <div class="u">
          <ul>
            <li class="all">全部</li>
            <li>投资</li>
            <li>已投满</li>
          </ul>
        </div>
      </div>
      <div class="options-item">
        <span class="options-title">年化收益</span>
        <div class="u">
          <ul>
            <li class="all">全部</li>
            <li>6.0-6.9%</li>
            <li>7.0-7.9%</li>
            <li>8.0%以上</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 筛选结果列表 -->
    <div class="p-goods-list">
      <!-- 筛选标题 -->
      <div class="p-goods-options">
        <div style="width: 20%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">项目名称</span>
        </div>
        <div style="width: 12%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">产品金额</span>
        </div>
        <div style="width: 10%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">产品期限</span>
        </div>
        <div style="width: 12%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">预计年化收益率</span>
        </div>
        <div style="width: 11%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">进度状态</span>
        </div>
        <div style="width: 12%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">剩余可投金额</span>
        </div>
        <div style="width: 10%">
          <span class="icon_select" :class="{'icon_select_up': opStatus == 1, 'icon_select_down': opStatus == -1, 'c-main': opStatus != 0}" @click="_changeOptions">产品到期日</span>
        </div>
        <div style="width: 10%">
          <span>状态</span>
        </div>
      </div>
      <div class="p-list">
        <div>
          <div class="p-item" v-for="(item, index) in 3" :key="index">
            <div style="width: 20%">
              <p>投融宝FXZQ201808388投融宝FXZQ201808388</p>
            </div>
            <div style="width: 12%">
              <span>1500000.00元</span>
            </div>
            <div style="width: 10%">
              <span>30天</span>
            </div>
            <div style="width: 12%">
              <span class="c-main">6.0%</span>
            </div>
            <div style="width: 11%">
              <span>76.0%</span>
            </div>
            <div style="width: 12%">
              <span>360000.00元</span>
            </div>
            <div style="width: 10%">
              <span>2018-09-06</span>
            </div>
            <div class="" style="width: 10%">
              <w-button type="main" @on-click="$router.push('/product')">投资</w-button>
              <!-- <w-button type="full" @on-click="$router.push('/product')">已投满</w-button> -->
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div style="padding-top: 30px">
          <w-paging></w-paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opStatus: 0 // 筛选状态
    }
  },
  methods: {
    /**
     * 点击搜索条件
     */
    _selectedItem() {},
    /**
     * 点击筛选条件
     */
    _changeOptions() {
      if (this.opStatus == 1) {
        this.opStatus = -1
        return
      }
      this.opStatus = 1
    }
  }
}
</script>

<style lang="scss">
.p-list {
  .btn {
    width: 80px;
    height: 30px;
  }
}
</style>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.m-products-area {
  margin: 30px auto;
}
.p-opitons {
  width: 100%;
  min-height: 220px;
  background-color: $color-white;
  padding: 20px;
  .options-item {
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    &:last-child {
      padding-bottom: 0
    }
  }
  .options-title {
    font-size: 16px;
    display: inline-block;
    margin-right: 30px;
  }
  .u {
    width: 80%;
    display: inline-block;
  }
  ul {
    list-style: none;
    li {
      float: left;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
  }
  .all {
    background-color: $color-main;
    color: $color-white;
  }
}
.p-goods-list {
  width: 100%;
  height: auto;
  min-height: 200px;
  background-color: $color-white;
  margin: 20px auto 30px;
  padding: 20px 20px 30px;
  .p-goods-options {
    padding-bottom: 20px;
    border-bottom: 1px dashed $border-gray;
    & > div {
      display: inline-block;
      text-align: center;
    }
  }
  .icon_select::after {
    content: '';
    cursor: pointer;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-left: 10px;
    background-image: url(../assets/icon_select.png);
    background-repeat: no-repeat;
    background-size: contain;
  }
  // 升序
  .icon_select_up::after {
    background-image: url(../assets/icon_select_up.png);
  }
  // 降序
  .icon_select_down::after {
    background-image: url(../assets/icon_select_down.png);
  }
  .p-list {
    .p-item {
      padding: 14px 0;
      border-bottom: 1px dashed $border-gray;

      & > div {
        display: inline-block;
        text-align: center;
      }
    }
  }
}
</style>
